<template>
	<div class="orderlist">
		<van-nav-bar fixed left-text="返回" left-arrow :title="!isWeixin() ? '修改反馈' : ''" @click-left="handleBack" />
		<div class="inner">
			<van-form ref="pushFormEle" label-width="100">
				<van-cell-group inset>
					<van-field name="title" required v-model="pushForm.title" label="描述" placeholder="请输入"
						:rules="[{ required: true, message: '请填写' }]" />
					<van-field required name="phone" v-model="pushForm.phone" autosize label="联系电话"
						placeholder="请填写联系电话" :rules="[{ required: true, message: '请填写' }]">
						<span style="color: #067DDB;" @click="phoneTips">查看说明</span>
					</van-field>

					<!-- 	<van-field name="ddimage" label="订单截图">
						<template #input>
							<van-uploader :file-list="ddImg" :max-count="1" :limit="1" :after-read="afterRead_1">
								
								<van-image width="60" height="60" :src="pushForm.ddimage" v-if='pushForm.ddimage!=""' />
							</van-uploader>

						</template>
					</van-field> -->

					<van-field name="zhimage" label="证据图片">
						<template #input>
							<van-uploader :file-list="zhiImg" :max-count="1" :limit="1" :after-read="afterRead_2">

								<van-image width="60" height="60" :src="pushForm.zhimage" v-if='pushForm.zhimage!=""' />
							</van-uploader>
						</template>
					</van-field>
					<!-- <van-field name="luyin" label="电话录音">
						<template #input>
							<van-uploader accept="audio/*" :file-list="luYin" :max-count="1" :limit="1"
								:after-read="afterRead_3">
								
								<audio style="width: 230px;" :src="pushForm.luyin" controls @click="playAudio(pushForm.luyin)"></audio>
							</van-uploader>
						</template>
					</van-field> -->
				</van-cell-group>

				<div style="margin: 16px">
					<van-button round block type="primary" @click="submit">
						提交修改
					</van-button>
				</div>
			</van-form>

		</div>

		<!-- 提示弹出框 -->

		<van-popup v-model:show="showpopup" round :style="{ height: '85%' }">

			<div v-if="popFlag=='dd'">
				<span style="display: inline-block;padding: 10px;font-size: 14px;">{{tishi.dingdan}}</span>
				<img style="width: 100%;height: 100%;" :src="tishi.dingdanimage" />
			</div>
			<div v-if="popFlag=='zz'">
				<span style="display: inline-block;padding: 10px; font-size: 14px;">{{tishi.zhengju}}</span>
				<img style="width: 100%;height: 100%;" :src="tishi.zhengjuimage" />
			</div>
			<div v-if="popFlag=='phone'">
				<span style="display: inline-block;padding: 10px;font-size: 14px;">{{tishi.phonetitle}}</span>
			</div>

		</van-popup>

	</div>
</template>
<script setup lang="ts">
	import { getCookie } from "@/utils/index";
	import { ref, reactive } from "vue";
	import { useRouter, useRoute } from "vue-router";
	import { isWeixin } from "@/utils/index";
	import { fankuiaddApi, fankuiupdateApi, uploadFileApi, userInfoApi, tishiApi } from "@/api/user";
	import { showLoadingToast, showSuccessToast, showFailToast, showConfirmDialog, showToast } from 'vant';
	import { json } from "stream/consumers";
	const router = useRouter();
	const route = useRoute();
	const pushFormEle = ref();

	const ddImg = ref();
	const zhiImg = ref();
	const luYin = ref();
	const tishi = ref();
	const pushForm = reactive({
		id: '',
		phone: '',
		ddimage: '',
		zhimage: '',
		title: '',
		luyin: '', 
		orderids: ''
	});
	// let editData : any = ref();
	let options = route.query;

	let data_s = JSON.parse(options.data as any);
	// editData = JSON.parse(options.data as any);
	pushForm.ddimage = data_s.ddimage;
	pushForm.zhimage = data_s.zhimage;
	pushForm.title = data_s.title;
	pushForm.id = data_s.id;
	pushForm.phone = data_s.phone;
	pushForm.luyin = data_s.luyin;
	pushForm.orderids = data_s.orderids;
	console.log('pushForm', pushForm)


	const popFlag = ref('')
	const showpopup = ref(false);
	const handleBack = () => {
		if (history.state?.back) {
			router.back();
		} else {
			router.push("/user");
		}
	};

	const getTishi = async () => {
		let { data } = await tishiApi({});
		tishi.value = data;
	};
	getTishi();

	// const onLoad = async () => {


	// };
	// 订单截图上传tip
	const ddTips = () => {
		showpopup.value = true;
		popFlag.value = 'dd';
	};
	// 证据截图上传tip
	const zzTips = () => {
		showpopup.value = true;
		popFlag.value = 'zz'
	};

	const phoneTips = () => {
		showpopup.value = true;
		popFlag.value = 'phone'
	}


	// 订单截图
	const afterRead_1 = (file : any) => {
		let formData = new FormData();
		formData.append('file', file.file);

		console.log('订单截图:', ddImg)
		uploadFileApi(formData).then((res) => {
			if (res.code == 0) {
				pushForm.ddimage = res.data;
			} else {

			}
		}
		)
	};
	// 证据图片
	const afterRead_2 = (file : any) => {
		let formData = new FormData();
		formData.append('file', file.file);
		console.log('这是证据图片upload返回：', formData)
		uploadFileApi(formData).then((res) => {
			if (res.code == 0) {
				pushForm.zhimage = res.data;
			} else {

			}
		}
		)
	};
	// 录音上传
	const afterRead_3 = (file : any) => {
		let formData = new FormData();
		formData.append('file', file.file);
		uploadFileApi(formData).then((res) => {
			if (res.code == 0) {
				pushForm.luyin = res.data;
			} else {

			}
		}
		)
	};
	const submit = async () => {
		let userData = await userInfoApi({ uid: getCookie('token') ? Number(getCookie('token')) : '', })

		// if (!userData?.data?.phone) {
		// 	return;
		// }
		console.log('pushFormpushFormpushForm', pushForm)
		pushFormEle.value.validate().then(() => {
			let toast = showLoadingToast({
				message: '提交中...',
				loadingType: 'spinner',
				forbidClick: true,
				duration: 0
			});
			let req = {
				id: pushForm.id,
				phone: pushForm.phone,
				ddimage: pushForm.ddimage,
				zhimage: pushForm.zhimage,
				title: pushForm.title,
				luyin: pushForm.luyin,
				orderids:pushForm.orderids
			}
			fankuiupdateApi(req).then((res) => {
				toast.close()
				if (res.code == 0) {
					showSuccessToast({
						message: '修改成功',
						duration: 1500,
						forbidClick: true,
						onClose: () => {
							router.back()
						}
					})
				} else {
					showFailToast(res.msg)
				}
			}
			)


		})

	}
	const playAudio = (val : any) => {
		val.play()
	}
</script>
<style>
	.inner {
		margin-top: 60px;
	}
</style>